<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>骑行</title>
    <script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode: "7d554d01ccbb43d85259d96175af91cb",
        }
    </script>
    <script src="https://webapi.amap.com/loader.js"></script>
    <script type="text/javascript">
        AMapLoader.load({
            key: "68f7d284ec39ccaf7880b0d41926657e",       // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "2.0",                 // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        }).then((AMap) => {
            const map = new AMap.Map('container', {
                zoom: 10,  //设置地图显示的缩放级别
                center: [104.065751, 30.657453],  //设置地图中心点坐标
                viewMode: '2D',  //设置地图模式
                position: new AMap.LngLat(116.39, 39.9),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
                title: '成都'
            });
        }).catch((e) => {
            console.error(e);  //加载错误提示
        });   
    </script>
</head>

<body>
    <!-- 头部 -->
    <header>
        <div class="navbar"></div>
    </header>

    <!-- 目前积累跑步距离 -->
    <div class="distance">
        <p>目前积累骑行距离</p>
        <p>
            <span>00.00</span>
            公里
        </p>
    </div>

    <!-- 主体 -->
    <main>
        <!-- 中间GO -->
        <div class="go">
            <strong id="go">GO</strong>
        </div>

        <!-- 下边设置 -->
        <div class="set">
            <a class="iconfont icon-shezhi"></a>
            <a class="iconfont icon-yinle"></a>
        </div>

        <!-- 地图 -->
        <div class="map" id="container"></div>
    </main>

    <!-- 跑步路线 -->
    <div class="path">
        <strong>骑行路线</strong>
        <p>使用骑行路线，邂逅附近的同行者</p>
    </div>

    <!-- 底部导航 -->
    <nav class="tabbar"></nav>
</body>

</html>